<template>
    <div>
        <div class="personal-teacher-top">
            <span class="personal-teacher-span">
                我的评审
            </span>
        </div>
        <div>
            <ReviewWorks ref="reviewworks" @refresh="getmyassess()">
            </ReviewWorks>
        </div>
        <!-- 状态栏 -->
        <div class="race-state">
            <p>评审状态：</p>
            <div class="race-state-item" v-for="(item, index) in sizer" :key="index">
                <button :class="{ active: index == currentbutton }" @click="getid(index)">{{ item }}</button>
            </div>
        </div>
        <div class="sco">
            <el-scrollbar max-height="500px">
                <div v-if="message_length == 0">
                    <template v-if="!loadingFailed">
                        <NoData>
                            稍等片刻&nbsp;数据正在赶来...
                        </NoData>
                    </template>
                    <template v-if="loadingFailed">
                        <NoData>
                            加载失败&nbsp;请稍后重试
                        </NoData>
                    </template>
                </div>
                <div class="race-item" v-for="(item, id) in message.value" :key="id">
                    <div class="race-txt">
                        <h2>{{ item.workName }}</h2>
                        <p>{{ item.contestName }}</p>
                    </div>
                    <p class="race-time">{{ item.createTime }}</p>
                    <div class="race-edit">
                        <button :class="item.status ? '' : 'raceup'" :disabled="item.status == 1"
                            @click="modifyShow(item.workId, item)">{{
                                item.status ? '已评审' : '未评审' }}</button>
                        <button :class="item.status ? 'view' : ''" :disabled="item.status == 0"
                            @click="modifyShow(item.workScoreId, item)">修改评审</button>
                        <button :class="item.status ? 'check' : ''" :disabled="item.status == 0"
                            @click="toWork(item.workId)">查看作品</button>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import NoData from '@/components/NoData.vue';
import { reactive, ref, onMounted } from "vue";
import { useRouter } from 'vue-router'
import ReviewWorks from "@/components/ReviewWorks.vue";
import { GetMyAssess } from "@/api/front/contest";
import { useStore } from 'vuex';
// 判断NoData是否显示
const loadingFailed = ref(false);

const sizer = ref(["全部", "未评审", "已评审"])//筛选属性数据

//我的评审数据初始化
let message = reactive([])
const message_length = ref(0)
const store = useStore();
const userInfo = store.state.userInfo
//接口获取我的评审数据
let data = {
    status: "",
    page_num: 1,
    page_size: 999,
    userId: userInfo.userId,
}
let getmyassess = () => {
    GetMyAssess(data).then(res => {
        // console.log('res', res);
        message.value = res.data.pageList;
        message_length.value = message.value.length;
        console.log('message', message.value);
    }).catch((err) => {
        console.log('err', err)
        loadingFailed.value = true;
    })
}
// 挂载时请求
onMounted(() => {
    getmyassess();
})

const currentbutton = ref(0);//当前所在的筛选按钮
//筛选数据
const getid = (index) => {
    currentbutton.value = index//点击切换当前所在的筛选按钮
    if (index !== 0) {//筛选按钮不是“全部”时
        data.status = index - 1
        getmyassess()
    }
    else {//筛选按钮为“全部”时
        data.status = ""
        getmyassess()//获取我的评审数据
    }
}

let reviewworks = ref()//获得弹窗组件以便使用openDialog方法
//点击评审按钮或修改评审按钮
const modifyShow = (id, item) => {
    reviewworks.value.openDialog(id, item)//给弹窗组件传一个workId和item
    console.log('已评审', id)
}
//查看作品路径
const router = useRouter()
const toWork = (workId) => {
    router.push({
        path: '/work-detail/' + workId + '/work-introduce'
    })
}
</script>

<style scoped lang="scss">
button {
    /* 清除默认边框 */
    border: 0;
    outline: none;
    /*清除默认背景 */
    background-color: transparent;
}

button.active {
    background-color: white;
}

.sco {
    height: 516px;
    // overflow: auto;
}

.race-state {
    display: flex;
    width: 670px;
    height: 40px;
    align-items: center;
    background-color: #DFEDFB;
    border-radius: 5px;
    margin-left: 38px;

    p {
        margin-left: 10px;
    }

    .race-state-item {
        margin-left: 10px;

        button {
            width: 70px;
            height: 25px;
            border-radius: 15px;
            margin-left: 20px;
        }
    }
}

.race-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 670px;
    height: 100px;
    margin-left: 38px;
    margin-top: 20px;
    // border:1px solid pink;
    box-shadow: -2px 2px 11px 3px rgba(0, 0, 0, .15);
    border-radius: 10px;
    .race-txt {
        width: 182px;
        h2 {
            margin-top: -8px;
        }

        p {

            margin-top: 21px;
        }
        h2,p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .race-time {
        font-size: 14px;
        margin-top: 50px;
    }

    .race-edit {
        button {
            width: 90px;
            height: 40px;
            margin-left: 10px;
            background-color: #E6E6E6;
            border-radius: 20px;
        }

        .raceup {
            background-color: #DBC2FB;
        }

        .view {
            background-color: #9FCAF2;
            color: black;
        }

        .check {
            background-color: #BFD99A;
            color: black;

        }
    }
}
</style>